import React, { Component } from 'react'
import ReactDOM from 'react-dom';

// export default class Demo extends Component {
//     state = { count: 0 }
    
//     myRef = React.createRef();

//     add = () => {
//         this.setState(state=>({count:state.count+1}))
//     }

//     unmout = () => {
//         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
//     }
    
//     show = () => {
//         alert(this.myRef.current.value)
//     }


//     componentDidMount() {
//         this.timer = setInterval(() => {
//             this.setState(state=>({count:state.count+1}))
//         },1000)
//     }

//     //组件卸载后的钩子
//     componentWillUnmount() {
//         clearInterval(this.timer);
//     }

//     render() {
//         return (
//             <div>
//                 <input type="text" ref={this.myRef}></input>
//                 <h2>当前求和为：{ this.state.count }</h2>
//                 <button onClick={this.add}>点我+1</button>
//                 <button onClick={this.unmout}>点我卸载组件</button>
//                 <button onClick={this.show}>点我显示数据</button>
//             </div>
//         )
//     }
// }


function Demo() {
    const [count, setCount] = React.useState(0);
    const myRef = React.useRef()
        
    //可以作为组件初始化
    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count+1) 
        }, 1000)
        return () => {
            clearInterval(timer);
        }
    }, [])
    
    //电我显示数据
    function show() {
        alert(myRef.current.value)
    }

    // 加的回调
    function add() {
        setCount(count + 1) //第一种写法
        setCount(count => count+1) 
    }

    //卸载组件的回调
    function unmout () {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    return (
        <div>
            <input type="text" ref={myRef}></input>
            <h2>当前求和为：{ count }</h2>
            <button onClick={add}>点我+1</button>
            <button onClick={unmout}>点我卸载组件</button>
            <button onClick={show}>点我显示数据</button>
        </div>
    )
}

export default Demo
